<template>
  <div class="container" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <div class="schoolBoxCont">
          <div class="schoolBoxContItem">
            <el-form-item label prop="phone">
              <div class="schoolBoxContItemTitle">
                手机号
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.phone"
                  placeholder="手机号"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
        
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                union_id
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.unionid"
                  placeholder="union_id"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                101账号
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.account"
                  placeholder="101账号"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                触发行为
              </div>
              <div class="schoolBoxContItemInput">
                <el-select
                  v-model="queryBox.doType"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in doType_option"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                行为对象
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.doResult"
                  placeholder="行为对象"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                查询两天前数据
              </div>
              <div class="schoolBoxContItemInput">
                <el-select
                  v-model="queryBox.querytwoDaysAgoInfo"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in twoDay_option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                时间
              </div>
              <div class="schoolBoxContItemInput schoolBoxContItemInput2">
                <el-date-picker
                v-model="createDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
              </div>
            </el-form-item>
          </div>
          
        </div>
      </el-form>
    </div>
    <div class="from-btns">
      <kt-button
        :label="$t('action.reset')"
        perms="true"
        type="primary"
        @click="reset('queryBox')"
      />
      <kt-button
        :label="$t('action.search')"
        perms="true"
        type="primary"
        @click="search"
      />
      <!-- <kt-button
        label="查询两天前数据"
        perms="true"
        type="primary"
        @click="searchTwoDay"
      /> -->
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        :showOperation='false'
        class="pageStatistics"
        permsSee="customer:chinaedu:see"
        permsEdit="customer:chinaedu:edit"
        :data="pageResult"
        :columns="columns"
        :loading='loading'
        @findPage="findPage"
      ></Crm-table>
    </div>
    

  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import { getPreMonth, getPrePreMonth, getNextMonth } from "@/utils/validate";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "PageStatistics",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      loading: false,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "phone", label: "手机号", minWidth: 100 },
        { prop: "unionid", label: "union_id", minWidth: 120 },
        { prop: "account", label: "101账号", minWidth: 50 },
        { prop: "createDate", label: "时间", minWidth: 120 },
        { prop: "doTypeStr", label: "触发行为", minWidth: 120 },
        { prop: "doSomething", label: "行为对象", minWidth: 300 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      createDate:[],
      twoDay_option:[
        {
          value: 2,
          label: "是"
        },
        {
          value: 1,
          label: "否"
        }
      ],
      queryBox: {
        account:'',
        doType:'',
        doResult:'',
        phone:'',
        unionid:'',
        querytwoDaysAgoInfo:1
      },
      doType_option:[]
    };
  },
  methods: {
    findeDownPage(){
      this.doType_option=JSON.parse(localStorage.getItem('studentActionDoType'))
    },
    // 搜索
    search() {
      this.loading = true;
      if(this.createDate){
        this.queryBox.createTimeStart = this.createDate[0];
        this.queryBox.createTimeEnd = this.createDate[1];
      }else{
        this.queryBox.createTimeStart = ''
        this.queryBox.createTimeEnd =''
      }
      
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // searchTwoDay(){
    //   this.createDate=[]
    //   this.queryBox.createTimeStart = ''
    //   this.queryBox.createTimeEnd =''
    //   this.loading = true;
    //   this.queryBox.querytwoDaysAgoInfo=2
    //   this.pageRequest.pageNum = 1;
    //   this.findPage(null);
    // },
    handleChange(value) {
      console.log(value);
    },
    // 获取分页数据
    findPage: function(data) {
      this.loading = true;
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      if(this.queryBox.querytwoDaysAgoInfo==2){
        this.queryBox.querytwoDaysAgoInfo=2
      }else{
        this.queryBox.querytwoDaysAgoInfo=1
      } 
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.queryBox.queryType=2
      // 时间转化
      function timestampToTime(timestamp) {
        let date = new Date(timestamp);
        var Y = date.getFullYear() + "";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "";
        var D = date.getDate() + " ";
        return Y + M + D;
      }
      // 当月
      let month = timestampToTime(new Date().getTime());
      // 上个月
      let month2 = getPreMonth(month);
      // 有数据的
      let haveDataPhone = "13200015896";
      // let phone = this.saveData.phone;
      this.$api.student.queryActionLog(this.queryBox).then(res => {
        let content = { content: res.listData, totalSize: res.total };
        this.pageResult = content;
        this.loading = false;
      });
      
    },

    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.createTimeStart = "";
      this.queryBox.createTimeEnd = " ";
      this.createDate = "";
      this.queryBox.account=''
      this.queryBox.doType=''
      this.queryBox.doResult=''
      this.queryBox.phone=''
      this.queryBox.unionid=''
      this.queryBox.querytwoDaysAgoInfo=1
      this.findPage(null);
    }
  },
  mounted() {
    this.findeDownPage()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>

<style lang='scss'>
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.schoolBoxCont {
  margin: 5px 5px;

  .schoolBoxContItem {
    margin-right: 10px;
    float: left;
    .el-form-item__content {
      display: flex;
      flex-direction: row;
    }
    .schoolBoxContItemTitle {
      background: #f5f7fa;
      width: 115px;
      border: 1px solid #dcdfe6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      line-height: 39px;
      border-right: none;
    }
    .schoolBoxContItemInput {
      width: 150px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
    .schoolBoxContItemInput2 {
      width: 350px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
}
.pageStatistics{
  tbody{
    tr{
      td{
        height: 35px;
      }
    }
  }
}
</style>
